<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'
  import EchartsMixins from '../echarts.mixins'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        textColor: '#00e6ff',
        charts: '',
        xAngleList: [],
        yList: [],
        xyList: [],
        timerList: [],
        // 监测点名称
        monitorName: '',
      }
    },
    computed: {
      options() {
        const Echarts = require('echarts')
        return {
          title: {
            show: false,
            text: this.monitorName + '位移变化曲线图',
            x: 'center',
            align: 'right',
            textStyle: {
              color: this.textColor
            }
          },
          legend: {
            data: ['相对位移'],
            y: 'top',
            x: 'right',
            padding: [10, 130, 0, 0],
            // 设置为可滚动的图例
            type: 'scroll',
            textStyle: {
              color: this.textColor
            }
          },
          grid: {
            left: 40,
            right: 120,
            bottom: 20,
            // 区域是否包含坐标轴的刻度标签
            containLabel: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: (params, ticket, callback) => {
              var contentArr = []
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                contentArr.push(Format(new Date(data.value[0])))
                contentArr.push(data.marker + data.seriesName + '位移值：' + data.value[1] + 'mm')
              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },
          },
          toolbox: {
            right: '5',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            splitLine: {
              show: false
            },
            type: 'time',
            boundaryGap: false,
            axisLabel: { // 坐标轴标签样式设置
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                const date = new Date(value)
                if (date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0) {
                  return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
                }
                return Echarts.format.formatTime('hh:mm:ss', new Date(value))
              },
              show: true,
              interval: 5,
              fontSize: 10,
              textStyle: {
                color: this.textColor
              },
            },
            nameTextStyle: {
              color: this.textColor
            },
            axisLine: {
              lineStyle: {
                color: this.textColor
              }
            }
          },
          yAxis: {
            max: function (value) {
              if (value.max < 1) {
                return 0.5;
              }
              return Math.ceil(value.max);//向上取整
            },
            name: '位移值/mm',
            type: 'value',
            nameTextStyle: {
              color: this.textColor
            },
            axisLine: {
              lineStyle: {
                color: this.textColor
              }
            },
            splitLine: { //网格线：隐藏
              lineStyle: {
                color: 'rgba(127, 127, 127, 0.5)',
                type: 'dashed', // 线型为虚线
              }
            }
          },
          visualMap: {
            textStyle: {
              color: '#ffffff' // 设置字体颜色为红色
            },
            show: true,
            precision: 1,
            itemStyle: {
              color: '#ffffff'
            },
            top: 20,
            right: 5,
            pieces: this.pieces,
          },
          series: [
            {
              itemStyle: {
                normal: {
                  color: '#a452e7'
                }
              },
              lineStyle: {
                width: 3 // 设置线条粗细为3
              },
              name: '相对位移',
              type: 'line',
              smooth: true,
              animation: false,
              symbol: 'none',
              data: this.xAngleList,
              markLine: {
                data: this.markLine
              },
              // markPoint: {
              //   symbolSize: 60,
              //   data: [
              //     {type: 'max', name: 'Max'},
              //     {type: 'min', name: 'Min'}
              //   ],
              //   label: {
              //     position: "inside",
              //     distance: 7,
              //     formatter: function (data) {
              //       return data.value + 'mm'
              //     }
              //   },
              //   itemStyle: {
              //     color: '#ff0000'
              //   }
              // },
            },

          ]
        }
      }
    },
    methods: {
      randomPercentage(min, max) {
        return Math.random() * (max - min) + min;
      },
      addData(data, sampleTime) {
        if (this.firstData) {
          this.xAngleList = []
          this.firstData = false
          this.charts.clear()
          this.charts.resize()
          console.log(this.xAngleList)
        }
        let base = 428//基准值
        let num = (data.distance - base).toFixed(1)
        if (num <= 2 && num >= -2) {
          //自身波动
          num = 0
        }
        if (this.xAngleList.length > 500) {
          this.xAngleList.shift()
        }
        num = num > 0 ? -num : num
        this.xAngleList.push([sampleTime, Math.abs(num)])
        this.charts.setOption(this.options)
        // console.log("位移数据添加**************************")
      },
      updateEchart(data, monitorName) {
        this.charts.clear()
        this.charts.resize()
        this.monitorName = monitorName
        this.xAngleList = data.relativeValue
        this.charts.setOption(this.options)
      },
    },
  }
</script>
